<template>
  <div>
    <div class="app-container">
      <el-row>
        <el-col :md="20" :lg="20" :xl="21">
          <el-row :gutter="10" style="margin-bottom: 10px;">
            <el-col :span="4">
              <div class="card-style" style="background: linear-gradient(#7A7AF4, #BE78F2)">
                <el-row class="card-row">
                  <el-col :span="14">
                    <div class="card-num">
                      234
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card-img">
                      <img src="@/assets/images/total1.png"/>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 40px;">
                  <el-col>
                    <div class="card-text">
                      总体事项统计
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card-style" style="background: linear-gradient(#F89B41, #FBC34C)">
                <el-row class="card-row">
                  <el-col :span="14">
                    <div class="card-num">
                      234
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card-img">
                      <img src="@/assets/images/total2.png"/>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 40px;">
                  <el-col>
                    <div class="card-text">
                      重要事项统计
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card-style" style="background: linear-gradient(#98D374, #79CD59)">
                <el-row class="card-row">
                  <el-col :span="14">
                    <div class="card-num">
                      234
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card-img">
                      <img src="@/assets/images/total3.png"/>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 40px;">
                  <el-col>
                    <div class="card-text">
                      协同事项总数量
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card-style" style="background: linear-gradient(#EE7C82, #F06B68)">
                <el-row class="card-row">
                  <el-col :span="14">
                    <div class="card-num">
                      234
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card-img">
                      <img src="@/assets/images/total4.png"/>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 40px;">
                  <el-col>
                    <div class="card-text">
                      催办事项总数量
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card-style" style="background: linear-gradient(#2B5FF7, #768BF1)">
                <el-row class="card-row">
                  <el-col :span="14">
                    <div class="card-num">
                      234
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card-img">
                      <img src="@/assets/images/total5.png"/>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 40px;">
                  <el-col>
                    <div class="card-text">
                      未完成事项总数
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="card-style" style="background: linear-gradient(#6EB2FC, #76AAFC)">
                <el-row class="card-row">
                  <el-col :span="14">
                    <div class="card-num">
                      234
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <div class="card-img">
                      <img src="@/assets/images/total6.png"/>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 40px;">
                  <el-col>
                    <div class="card-text">
                      超期事项总数
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div style="background-color: #FFFFFF;height: 200px;padding: 10px;">
                <div class="line" style="background-color: #305AF5;"></div>
                <span style="font-size: 20px;color: black;">催办事项</span>
                <el-row style="height: 150px;">
                  <el-col :span="4">
                    <el-row>
                      <el-col>
                        <div class="number-img" >
                          <img src="@/assets/images/number1.png"/>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-num" >
                          64
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-text" >
                          优秀事项数量
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="1">
                    <div class="split-line"></div>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col>
                        <div class="number-img" >
                          <img src="@/assets/images/number2.png"/>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-num" >
                          56
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-text" >
                          良好事项数量
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="1">
                    <div class="split-line"></div>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col>
                        <div class="number-img" >
                          <img src="@/assets/images/number3.png"/>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-num" >
                          64
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-text" >
                          一般事项数量
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="1">
                    <div class="split-line"></div>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col>
                        <div class="number-img" >
                          <img src="@/assets/images/number4.png"/>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-num" >
                          64
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-text" >
                          合格事项数量
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="1">
                    <div class="split-line"></div>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col>
                        <div class="number-img" >
                          <img src="@/assets/images/number5.png"/>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-num" >
                          64
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <div class="number-text" >
                          不合格事项数量
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col  :md="4" :lg="4" :xl="3">
          <div class="card-right">
            <el-row style="height: 60px;padding: 0px 10px;">
              <el-col>
                <div>
                  <div class="line" style="margin-top: 20px;"></div>
                  <span style="font-size: 20px;color: #FFFFFF;">超期提醒</span>
                  <el-row style="margin-top: 15px;">
                    <el-col>
                      <div class="right-number">
                        5
                      </div>
                      <div class="right-text">
                        超期任务数量
                      </div>
                    </el-col>
                  </el-row>
                  <div class="divider"></div>
                  <el-row>
                    <el-col>
                      <div class="right-number">
                        2
                      </div>
                      <div class="right-text">
                        超期事项数量
                      </div>
                    </el-col>
                  </el-row>
                  <div class="divider"></div>
                  <el-row>
                    <el-col>
                      <div class="right-number">
                        7
                      </div>
                      <div class="right-text">
                        超期协同事项数量
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 0px 15px 0px 5px;background-color: #F4F6FB;">
      <el-row>
        <el-col :span="24">
          <div style="background-color: #FFFFFF;padding: 10px;">
            <div class="line" style="background-color: #305AF5;"></div>
            <span style="font-size: 20px;color: black;">我的关注</span>
            <el-button style="float: right;margin-right: 20px;color:#6277AE;border-color: #79787D;" @click="toMatterList">全部事项</el-button>
            <el-button style="float: right;margin-right: 10px;color:#FFFFFF;background-color: #2C58F3;" @click="toCareList">更多关注</el-button>
            <div style="height: 15px;"></div>
            <el-table v-loading="loading" :data="matterList" :header-cell-style="{ backgroundColor: '#2C58F3 !important', color: '#FFFFFF'}">
              <el-table-column min-width="10%" label="事项名称" align="left" prop="matterName">
                <template #default="scope">
                  <el-text type="primary" style="cursor: pointer;color:#2C58F3;font-weight: 550;" >{{ scope.row.matterName }}</el-text>
                </template>
              </el-table-column>
              <el-table-column min-width="10%" label="当前进展" align="left" prop="em1"/>
              <el-table-column min-width="5%" label="是否重要工作" align="center" prop="isKeyWork">
                <template #default="scope">
                  <dict-tag :options="matter_work_type" :value="scope.row.isKeyWork"/>
                </template>
              </el-table-column>
              <el-table-column min-width="5%" label="负责人" align="center" prop="matterResponsible"/>
              <el-table-column min-width="5%" label="关联人" align="center" prop="em2"/>
              <el-table-column min-width="5%" label="事项完成期限" align="center" prop="completionDeadline">
                <template #default="scope">
                  <span>{{ parseTime(scope.row.completionDeadline, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column min-width="5%" label="状态" align="center" prop="em1">
                <template #default="scope">
                <span :style="{ color: getStatusColor(scope.row) }">
                  {{ getStatusText(scope.row) }}
                </span>
                </template>
              </el-table-column>
              <el-table-column min-width="5%" label="操作" align="center">
                <template #default="scope">
                  <el-button plain size="small" style="background-color: #deeffc;color:#6b79b2;border-color: #7c8da1;" @click="getInto(scope.row)">进入</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination style="margin-top: 0px;"
                        v-show="total>0"
                        :total="total"
                        :pageSizes="[5]"
                        v-model:page="queryParams.pageNum"
                        v-model:limit="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 5px 15px 0px 5px;background-color: #F4F6FB;">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-card shadow="never">
            <template #header >
              <div>
                <span style="font-size: 20px;">待办事项（{{data.total}}）</span>
              </div>
            </template>
            <div style="overflow-y: scroll;height: 230px">
              <p v-for="matter in data.indoMatters" class="text item">
                <el-row>
                  <el-col :span="18">
                    {{ matter.matterName }}
                  </el-col>
                  <el-col :span="6">
                    {{ matter.createTime }}
                  </el-col>
                </el-row>
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px;">催办事项（{{data.total1}}）</span>
              </div>
            </template>
            <div style="overflow-y: scroll;height: 230px">
              <p v-for="matter in data.indoDialog" class="text item">
                <el-row>
                  <el-col :span="18">
                    {{ matter.matterName }}
                  </el-col>
                  <el-col :span="6">
                    {{ matter.createTime }}
                  </el-col>
                </el-row>
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span  style="font-size: 20px;">通知列表（8）</span>
              </div>
            </template>
            <p v-for="o in 4" :key="o" class="text item">
              <el-row>
                <el-col :span="18">
                  {{ '通知列表 ' + o }}
                </el-col>
                <el-col :span="6">
                  2024-07-02
                </el-col>
              </el-row>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Index">
import {listCare} from "@/api/care/care";
import useUserStore from "@/store/modules/user.js";
import {dataScopeMatterList,getMyDialog} from "@/api/matter/matter.js";
const router = useRouter();
const userStore = useUserStore()

const { proxy } = getCurrentInstance();
const { matter_work_type, matter_overdue } = proxy.useDict('matter_work_type', 'matter_overdue');
const matterList = ref([]);
const loading = ref(true);
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    matterName: null,
    matterResponsibleId: userStore.id,
  },
  indoMatters:[],
  indoDialog:[],
  total: 0,
  total1: 0,
});
const emit = defineEmits(['getInto']);
const { queryParams } = toRefs(data);
function getList(){
  loading.value = true;
  listCare(queryParams.value).then((response) => {
    matterList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};
function indoMatter(){
  dataScopeMatterList(data.queryParams).then((response) => {
    data.indoMatters = response.rows;
    data.total = response.total;
  });
}
function indodialog(){
  getMyDialog().then((response) => {
    data.indoDialog = response.data;
    data.total1 = response.data.length;
  });
}

function getStatusText(row){
  if (row.em1) {
    return row.em1;
  } else {
    const currentDate = new Date();
    const deadlineDate = new Date(row.completionDeadline);
    return currentDate > deadlineDate ? '超时' : '进行中';
  }
};

function getStatusColor(row){
  if (row.em1) {
    return 'black';
  } else {
    const currentDate = new Date();
    const deadlineDate = new Date(row.completionDeadline);
    return currentDate > deadlineDate ? 'red' : '#6b79b2';
  }
};

function toMatterList(){
  router.push('/WorkImplementation');
}
function toCareList(){
  router.push("/care/myCare");
}
function getInto(row){
  emit('getInto', row);
}
getList();
indoMatter();
indodialog();
</script>
<style scoped lang="scss">
.app-container {
  padding: 5px;
  background-color: #F4F6FB;
}
.card-style {
  height: 120px;
  padding: 5px;
  border-radius: 10px;
  background-color: #305af5;
}
.card-row {
  height: 50px;
  margin-bottom: 15px;
}
.card-num {
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: #FFFFFF;
}
.card-img {
  text-align: center;
  line-height: 65px;
}
.card-text {
  text-align: center;
  line-height: 40px;
  font-size: 17px;
  color: #FFFFFF;
}
.card-right {
  height: 330px;
  margin: 0px 10px;
  background: linear-gradient(#E85C07, #EA7723)
}
.line{
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 10px;
  background-color: #FFFFFF;
}
.number-img {
  text-align: center;
  padding: 20px 10px 10px 10px;
}
.number-num {
  text-align: center;
  font-size: 30px;
}
.number-text {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #6B6B6B;
  padding: 10px;
}
.split-line {
  height: 100px;
  border-left: 1px solid rgb(193, 191, 191);
  margin: 30px;
}
.divider {
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}
.right-number {
  font-size: 35px;
  color: #FFFFFF;
  text-align: center;
}
.right-text {
  height: 20px;
  font-size: 15px;
  color: #FFFFFF;
  text-align: center;
}
.el-card :deep(.el-card__header) {
  background-color: #e3ebfe;
}
</style>

